<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: #f5f5f5;
            color: #333;
        }
        
        .header {
            background: white;
            padding: 15px 20px;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .back-btn {
            font-size: 18px;
            color: #333;
            text-decoration: none;
        }
        
        .title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
        }
        
        .header-icons {
            display: flex;
            gap: 15px;
            color: #666;
        }
        
        .container {
            max-width: 400px;
            margin: 0 auto;
            background: white;
            min-height: 100vh;
        }
        
        .form-section {
            padding: 40px 20px;
        }
        
        .welcome-section {
            text-align: center;
            margin-bottom: 40px;
        }
        
        .welcome-title {
            font-size: 28px;
            font-weight: 700;
            color: #333;
            margin-bottom: 8px;
        }
        
        .welcome-subtitle {
            font-size: 16px;
            color: #666;
            line-height: 1.5;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            color: #333;
            font-weight: 500;
        }
        
        .input-group {
            position: relative;
        }
        
        .form-input {
            width: 100%;
            padding: 15px 45px 15px 15px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            font-size: 16px;
            background: white;
            transition: border-color 0.3s;
        }
        
        .form-input:focus {
            outline: none;
            border-color: #007AFF;
        }
        
        .input-icon {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            color: #666;
        }
        
        .password-toggle {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: #666;
            cursor: pointer;
            font-size: 18px;
        }
        
        .password-toggle:hover {
            color: #007AFF;
        }
        
        
        .login-btn {
            width: 100%;
            padding: 18px;
            background: #007AFF;
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            margin: 30px 0 20px 0;
            transition: background 0.3s;
        }
        
        .login-btn:hover {
            background: #0056b3;
        }
        
        .login-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
        
        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid #f3f3f3;
            border-top: 3px solid #ffffff;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-right: 8px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .forgot-password {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .forgot-link {
            color: #007AFF;
            text-decoration: none;
            font-size: 14px;
        }
        
        .forgot-link:hover {
            text-decoration: underline;
        }
        
        .register-section {
            text-align: center;
            padding: 20px;
            background: #f8f9fa;
            margin-top: 20px;
            border-radius: 8px;
        }
        
        .register-text {
            font-size: 14px;
            color: #666;
            margin-bottom: 15px;
        }
        
        .register-btn {
            display: inline-block;
            padding: 12px 24px;
            background: white;
            color: #007AFF;
            border: 2px solid #007AFF;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s;
        }
        
        .register-btn:hover {
            background: #007AFF;
            color: white;
        }
        
        .status-info {
            margin-top: 20px;
            padding: 15px;
            border-radius: 8px;
            font-size: 14px;
            text-align: center;
        }
        
        .status-success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .status-error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .status-info.hidden {
            display: none;
        }
        
        .user-type-section {
            margin-bottom: 30px;
        }
        
        .user-type-buttons {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .user-type-btn {
            display: flex;
            align-items: center;
            padding: 20px;
            border: 2px solid #e0e0e0;
            border-radius: 12px;
            background: white;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .user-type-btn.selected {
            border-color: #007AFF;
            background: #f0f8ff;
        }
        
        .user-type-icon {
            width: 24px;
            height: 24px;
            margin-right: 15px;
            background: #007AFF;
            border-radius: 4px;
        }
        
        .user-type-text {
            font-size: 16px;
            font-weight: 500;
        }
        
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 头部 -->
        <div class="header">
            <a href="#" class="back-btn">‹</a>
            <div class="title">登录</div>
            <div class="header-icons">
                <span>⋯</span>
                <span>⚙</span>
            </div>
        </div>
        
        <div class="form-section">
            <!-- 欢迎信息 -->
            <div class="welcome-section">
                <h1 class="welcome-title">欢迎回来</h1>
                <p class="welcome-subtitle">登录您的账户，开始使用无人机服务</p>
            </div>
            
            <form id="loginForm">
                <!-- 用户类型选择 -->
                <div class="user-type-section">
                    <div class="user-type-buttons">
                        <div class="user-type-btn selected" data-type="1">
                            <div class="user-type-icon"></div>
                            <div class="user-type-text">飞手登录</div>
                        </div>
                        <div class="user-type-btn" data-type="2">
                            <div class="user-type-icon"></div>
                            <div class="user-type-text">组织登录</div>
                        </div>
                    </div>
                </div>

                <!-- 手机号码 -->
                <div class="form-group">
                    <label class="form-label">手机号码</label>
                    <div class="input-group">
                        <input type="tel" id="phone" name="phone" class="form-input" placeholder="请输入手机号码" required>
                    </div>
                </div>

                <!-- 密码 -->
                <div class="form-group">
                    <label class="form-label">密码</label>
                    <div class="input-group">
                        <input type="password" id="password" name="password" class="form-input" placeholder="请输入密码" required>
                        <button type="button" class="password-toggle" onclick="togglePassword()">👁</button>
                    </div>
                </div>


                <!-- 记住我 -->
                <div class="form-group">
                    <label style="display: flex; align-items: center; cursor: pointer;">
                        <input type="checkbox" id="rememberMe" name="rememberMe" style="margin-right: 8px;">
                        <span style="font-size: 14px; color: #666;">记住我</span>
                    </label>
                </div>

                <!-- 状态信息 -->
                <div id="statusInfo" class="status-info hidden"></div>

                <!-- 登录按钮 -->
                <button type="submit" class="login-btn" id="loginBtn">登录</button>

                <!-- 忘记密码 -->
                <div class="forgot-password">
                    <a href="#" class="forgot-link">忘记密码？</a>
                </div>
            </form>
        </div>
        
        <!-- 注册提示 -->
        <div class="register-section">
            <div class="register-text">还没有账户？</div>
            <a href="/register.html" class="register-btn">立即注册</a>
        </div>
    </div>

    <script>
        let currentUserType = '1'; // 默认飞手登录
        
        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            initUserTypeSelection();
            initForm();
        });
        
        // 初始化用户类型选择
        function initUserTypeSelection() {
            document.querySelectorAll('.user-type-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    document.querySelectorAll('.user-type-btn').forEach(b => b.classList.remove('selected'));
                    this.classList.add('selected');
                    currentUserType = this.dataset.type;
                });
            });
        }
        
        // 初始化表单
        function initForm() {
            // 表单提交
            document.getElementById('loginForm').addEventListener('submit', function(e) {
                e.preventDefault();
                submitLogin();
            });
            
            // 回车键登录
            document.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    submitLogin();
                }
            });
        }
        
        // 切换密码显示
        function togglePassword() {
            const passwordInput = document.getElementById('password');
            const toggleBtn = document.querySelector('.password-toggle');
            
            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                toggleBtn.textContent = '🙈';
            } else {
                passwordInput.type = 'password';
                toggleBtn.textContent = '👁';
            }
        }
        
        
        // 提交登录
        async function submitLogin() {
            const phone = document.getElementById('phone').value.trim();
            const password = document.getElementById('password').value;
            
            // 验证输入
            if (!phone) {
                showStatus('请输入手机号码', 'error');
                return;
            }
            
            if (!password) {
                showStatus('请输入密码', 'error');
                return;
            }
            
            // 显示加载状态
            const loginBtn = document.getElementById('loginBtn');
            const originalText = loginBtn.textContent;
            loginBtn.innerHTML = '<div class="loading"></div>登录中...';
            loginBtn.disabled = true;
            
            try {
                const loginData = {
                    phone: phone,
                    password: password
                };
                
                const response = await fetch('/drone/register/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(loginData)
                });
                
                const result = await response.json();
                
                if (result.code === 200) {
                    // 登录成功，保存token
                    localStorage.setItem('token', result.data);
                    localStorage.setItem('userType', currentUserType);
                    localStorage.setItem('loginTime', new Date().getTime().toString());
                    
                    console.log('登录成功 - 保存的token:', result.data);
                    console.log('登录成功 - 用户类型:', currentUserType);
                    
                    showStatus('登录成功！Token有效期7天', 'success');
                    
                    // 延迟跳转
                    setTimeout(() => {
                        // 根据用户类型跳转到不同页面
                        if (currentUserType === '2') {
                            // 组织方跳转到任务发布页面
                            window.location.href = '/task-publish.html';
                        } else {
                            // 飞手跳转到任务列表页面
                            window.location.href = '/task-list.html';
                        }
                    }, 1500);
                    
                } else {
                    showStatus('登录失败: ' + result.msg, 'error');
                }
                
            } catch (error) {
                showStatus('网络错误: ' + error.message, 'error');
            } finally {
                // 恢复按钮状态
                loginBtn.textContent = originalText;
                loginBtn.disabled = false;
            }
        }
        
        // 显示状态信息
        function showStatus(message, type) {
            const statusInfo = document.getElementById('statusInfo');
            statusInfo.textContent = message;
            statusInfo.className = `status-info status-${type}`;
            statusInfo.classList.remove('hidden');
            
            // 3秒后自动隐藏错误消息
            if (type === 'error') {
                setTimeout(() => {
                    hideStatus();
                }, 3000);
            }
        }
        
        // 隐藏状态信息
        function hideStatus() {
            const statusInfo = document.getElementById('statusInfo');
            statusInfo.classList.add('hidden');
        }
        
        // 生成UUID
        function generateUUID() {
            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                const r = Math.random() * 16 | 0;
                const v = c === 'x' ? r : (r & 0x3 | 0x8);
                return v.toString(16);
            });
        }
        
        // 检查是否已登录
        function checkLoginStatus() {
            const token = localStorage.getItem('token');
            if (token) {
                // 已登录，根据用户类型跳转
                const userType = localStorage.getItem('userType');
                if (userType === '2') {
                    window.location.href = '/task-publish.html';
                } else {
                    window.location.href = '/task-list.html';
                }
            }
        }
        
        // 页面加载时检查登录状态
        checkLoginStatus();
    </script>
</body>
</html>
